window.addEventListener('load',function(){
// 1.鼠标经过显示按钮,离开隐藏按钮
    let arrow_l=document.querySelector('.arrow-l');
    let arrow_r=document.querySelector('.arrow-r');
    let focus=document.querySelector('.focus');
    let focusWidth=focus.offsetWidth;
    focus.addEventListener('mouseenter',function(){
        arrow_l.style.display='block';
        arrow_r.style.display='block';
        clearInterval(timer);//停止自动播放功能
    });
    focus.addEventListener('mouseleave',function(){
        arrow_l.style.display='none';
        arrow_r.style.display='none';
        timer=setInterval(() => {
            arrow_r.click();
        }, 2000);

    });

    // 2.动态生成小圆圈,根据图片的多少
    let ul=focus.querySelector('ul');
    let ol=focus.querySelector('.circle');
    for(let i=0;i<ul.children.length;i++){
        //创建节点并插入ol当中
        let li=document.createElement('li');
        li.setAttribute('index',i);//记录li的索引号
        ol.appendChild(li);

        //添加点击事件
        li.addEventListener('click',function(){
            //点击的小圆圈加curr,其他小圆圈移除curr
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            this.className='curr';
            
            //点击小圆圈滚动到当前图片
            let index=this.getAttribute('index');

            num=index;
            circle=index;//点击改变num和circle
            animate(ul,-index*focusWidth);
        });
    }
    ol.children[0].className='curr';
   
    //克隆第一张轮播图
    let newNode=ul.children[0].cloneNode(true);
    ul.appendChild(newNode);
    

    let num=0;
    let circle=0;
    let flag=true;//节流

    //3.点击右按钮向右滚动图片
    arrow_r.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==ul.children.length-1){
                ul.style.left=0;
                num=0;
            }
            num++;
            let focusWidth=focus.offsetWidth;
            animate(ul,-num*focusWidth,function(){
                flag=true;//回调函数,动画执行完再调用
            });
    
            //点击按钮,小圆圈变换
            circle++;
            if(circle==ol.children.length){
                circle=0;
            }
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            ol.children[circle].className='curr';
            

        }
        
   
    });

    //4.点击左侧按钮
    arrow_l.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==0){
                num=ul.children.length-1;
                ul.style.left=-num*focusWidth;
            }
            num--;
            
            animate(ul,-num*focusWidth,function(){
                flag=true;
            });
    
            //点击按钮,小圆圈变换
            circle--;
            if(circle<0){
                circle=ol.children.length-1;
            }
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            ol.children[circle].className='curr';
        }
       
   
    });

    //5.自动播放轮播图
    var timer=setInterval(() => {
        arrow_r.click();
    }, 2000);
  

    //快捷导航下拉菜单
    let a=document.querySelector('.arrow-show');
    let b=document.querySelector('.nav_show');
    a.addEventListener('mouseenter',function(){
        b.style.display='block';
    });
    a.addEventListener('mouseleave',function(){
        b.style.display='none';
    });

});


//1.动画播放(ul要相对定位)
// 2.结构(html)
// 3.鼠标经过显示按钮,离开隐藏按钮
// 4.动态生成小圆圈
// 5.点击小圆圈轮播图移动,改变小圆圈样式
// 6.右侧按钮无缝滚动(克隆第一张图片放在后面)
// 7.按钮和图片以及小圆圈的对应
// 8.自动播放(setInterval)鼠标经过开始播放,离开停止播放
//9.节流(flag=false),回调函数flag=true






$(function(){

   $('.tab_list ul li').click(function(){
       $(this).children('a').addClass('checked');
       $(this).siblings().children('a').removeClass('checked');
       let index=$(this).index();
  });

  //电梯导航
    let flag=true;
    let toolTop=$('.rec').offset().top;
    function toolshow(){
        if($(document).scrollTop()>=toolTop){
            $('.fixedtool').fadeIn();
        }
        else{
            $('.fixedtool').fadeOut();
        }
    }
  //window 的滚动效果
    $(window).scroll(function(){
        //1. 滚动到某个位置导航显示
        toolshow();

        //3.滚动到哪个floor,给导航加toolcurr
        if(flag){
            $('.floor .w').each(function(i,ele){
                if($(document).scrollTop()>=$(ele).offset().top){
                    $('.fixedtool ul li').eq(i).addClass('toolcurr').siblings().removeClass();
                }
            });    
        }
        
    });

    //2.点击导航到相应的模块
    $('.fixedtool ul li').click(function(){
        if(flag){
        flag=false;
        //每个盒子的索引号
        let index=$(this).index();
        //每个盒子top距离
        let floortop=$('.floor .w').eq(index).offset().top;
        $('body,html').stop().animate({
            scrollTop:floortop
        },function(){
            flag=true;
        });

        $(this).addClass('toolcurr').siblings().removeClass('toolcurr');

        }   
    });






});
